<template>
	<view class="wrap">
		
		<view class="ipt-wrap name-wrap">
			<view class="label">
				收货人
			</view>
			<view class="right" v-show="nowindex==1">
				 {{addressObj.name}}
			</view>
			<view class="right" v-show="nowindex==2">
				 <input v-model="addressObj.name" type="text" placeholder="请输入真实姓名" />
			</view>
		</view>
		<view class="ipt-wrap name-wrap">
			<view class="label">
				性别
			</view>
			<view class="right" v-show="nowindex==1">
				 {{nowcurrent==1?'男':'女'}}
			</view>
			<view class="right" v-show="nowindex==2">
				<radio-group @change="radioChange" class="radio-item">
					 <label class="radio-item"  v-for="(item, index) in ritems" :key="item.value">
						 <view class="radio-item">
							 <radio :value="item.value" :checked="index === nowcurrent" />
						 </view>
						 <view class="radio-item">{{item.name}}</view>
					 </label>
				</radio-group>
			</view>
		</view>
		<view class="ipt-wrap name-wrap">
			<view class="label">
				手机号码
			</view>
			<view class="right" v-show="nowindex==1">
				 {{addressObj.phone}}
			</view>
			<view class="right" v-show="nowindex==2">
				 <input v-model="addressObj.phone" type="text" placeholder="请输入真实手机号码" />
			</view>
		</view>
		<view class="ipt-wrap name-wrap">
			<view class="label">
				
				<text v-show="nowindex==1">
					地区
				</text>
				<text v-show="nowindex==2">
					选择地区
				</text>
			</view>
			<view class="right" v-show="nowindex==1">
				 {{addressObj.area}}
			</view>
			<view @click="selAddress" class="right" v-show="nowindex==2">
				
				 {{addressObj.area?addressObj.area:'省、市、区、街道'}}
			</view>
		</view>
		<view class="ipt-wrap name-wrap">
			<view class="label">
				详细地址
			</view>
			<view class="right" v-show="nowindex==1">
				{{addressObj.detailed_address}}
			</view>
			<view class="right" v-show="nowindex==2">
				 <textarea v-model="addressObj.detailed_address" type="text" placeholder="请输入详细地址" />
			</view>
		</view>
		<view v-show="nowindex==1" class="next" @click="nowindex=2">
			编辑地址
		</view>
		<view class="btn-wraps" v-show="nowindex==2">
			<view  class="next-cancel" @click="canceledit">
				取消编辑
			</view>
			<view  class="next-sure" @click="subData">
				提交地址
			</view>
		</view>
		<selectAddress ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>
	</view>
</template>


<script>
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
	export default {
		components:{
			selectAddress
		},
		data() {
			return {
				nowcurrent:'',
				ritems:[
					{
						value:'0',
						name:'女'
					},
					{
						value:'1',
						name:'男'
					}
				],
				nowindex:1,
				addressObj:{
					area:''
				}
				
				
			}
		},
		onShow(){
			//this.getData()
		},
		onLoad() {
			this.getData()
		},
		methods: {
			radioChange(val){
				this.nowcurrent=val.detail.value
				
			},
			successSelectAddress(address){
				
				this.addressObj.area=address
				//console.log(this.addressObj.area)
				
			},
			selAddress(){
				this.$refs.selectAddress.show()
			},
			
			canceledit(){
				this.nowindex=1
			},
			subData(){
				if(!this.addressObj.name){
					uni.showToast({
					    title: '请输入真实姓名',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(!this.addressObj.phone){
					uni.showToast({
					    title: '请输入手机号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(!this.addressObj.area){
					uni.showToast({
					    title: '请选择地址',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(!this.addressObj.detailed_address){
					uni.showToast({
					    title: '请输入详细地址',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
				let that=this
				
				that.apipost('/api/user/modify_address',{
					detailed_address:that.addressObj.detailed_address,
					name:that.addressObj.name,
					phone:that.addressObj.phone,
					area:that.addressObj.area,
					sex:that.nowcurrent==1?true:false
				},true).then(res => {
					if(res.Code==10200){
						
						that.nowindex=1
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			getData(){
		
				
				
				
				let that=this
				that.apiget('/api/user/get_address').then(res => {
					if(res.Code==10200){
						
						let data=res.Data
						if(data){
							that.addressObj=data
							that.nowcurrent=data.sex?1:0
						}else{
							that.nowcurrent=0
							that.addressObj={
								area:''
							}
						}
						
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.radio-item{
		display:flex;
		margin-right:12rpx;
	}
	.btn-wraps .next-cancel{
		width:200rpx;
		margin-right:100rpx;
		background:red;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		
		border-radius:12rpx;
	}
	.btn-wraps .next-sure{
		width:200rpx;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		
		border-radius:12rpx;
		background:#4263ee;
	}
	.btn-wraps{
		color:#fff;
		width:668rpx;
		margin:0 auto;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		margin-top:60rpx;
	}
	.next{
		
		background:#4263ee;
		color:#fff;
		width:668rpx;
		margin:0 auto;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		margin-top:60rpx;
		border-radius:12rpx;
	}
	.ipt-wrap .label{
		
		width:200rpx;
	}
	.ipt-wrap .right{
		flex:1;
	}
	uni-textarea{
		width:100%;
	}
	.right input{
		height:100%;
	}
	.ipt-wrap{
		display:flex;
		align-items: center;
		width:604rpx;
		margin:0 auto;
		padding:26rpx 0;
		/* border-bottom:1rpx solid #e8e8e8 */
	}

	.name-wrap{
		border-bottom:1rpx solid #e8e8e8
	}
	.wrap{
		background:#fff;
		min-height:100%;
	}
	.tips{
		color:#9b9b9b;
		padding:34rpx 44rpx 124rpx 30rpx;
	}
</style>
